import {
  CardDescription,
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
  Popover,
  PopoverContent,
  PopoverTrigger,
  Separator,
} from '@sushiswap/ui'
import type { FC, ReactNode } from 'react'
import { formatPercent } from 'sushi'
interface APRHoverCardProps {
  children: ReactNode
  apr24h: number
}

export const APRHoverCard: FC<APRHoverCardProps> = ({ children, apr24h }) => {
  const card = (
    <div className="p-6">
      <CardDescription className="mb-6 text-xs">
        APR is calculated based on the fees generated by the pool over the last
        24 hours. The APR displayed is algorithmic and subject to change.
      </CardDescription>
      <div className="flex flex-col gap-3">
        <div className="flex items-center justify-between gap-1">
          <span className="flex flex-grow text-sm text-muted-foreground">
            Fees
          </span>
          <span className="text-sm text-right">
            {formatPercent(apr24h / 100)}
          </span>
        </div>

        <div className="flex items-center gap-2">
          <Separator className="text-muted-foreground" />
        </div>
        <div className="flex items-center justify-between gap-1">
          <span className="flex flex-grow text-sm font-bold">Total APR</span>
          <span className="text-sm font-bold text-right">
            {formatPercent(apr24h / 100)}
          </span>
        </div>
      </div>
    </div>
  )

  return (
    <>
      <div className="hidden sm:block">
        <HoverCard openDelay={300} closeDelay={0}>
          <HoverCardTrigger asChild>{children}</HoverCardTrigger>
          <HoverCardContent
            side="right"
            className="!p-0 max-w-[320px] whitespace-normal text-left"
          >
            {card}
          </HoverCardContent>
        </HoverCard>
      </div>
      <div className="block sm:hidden">
        <Popover>
          <PopoverTrigger asChild>{children}</PopoverTrigger>
          <PopoverContent
            side="right"
            className="!p-0 max-w-[320px] whitespace-normal text-left"
          >
            {card}
          </PopoverContent>
        </Popover>
      </div>
    </>
  )
}
